<template>
<div style="background: white">

  <el-form :model="resetForm" status-icon  ref="resetForm" label-width="100px"  style="width: 300px">
    <el-form-item label="群组名" prop="username">
      <el-input type="name"  v-model="resetForm.name" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="群组描述" prop="description">
      <el-input type="question"  v-model="resetForm.description" auto-complete="off"></el-input>
    </el-form-item>


  </el-form>
  <div style="margin-left: 10%">选择群组用户</div>

  <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange">


    <el-table-column type="selection" width="55" />
<!--    <el-table-column label="Date" width="120">-->
<!--      <template #default="scope">{{ scope.row.date }}</template>-->
<!--    </el-table-column>-->
    <el-table-column property="username" label="username" width="120" />
    <el-table-column property="phone" label="phone" show-overflow-tooltip />
  </el-table>


  <div class="btn-sub">
    <el-button type="primary" @click="registerUserGru()" class="loginbutton"   >            注册             </el-button>
    <el-button type="primary" @click="back()"  class="loginbutton"  >            返回               </el-button>
  </div>
</div>
</template>

<script>
import {ElMessage} from "element-plus";

export default {
  name: "creatUserGroup",
  data(){

    return{
      resetForm: {
       name: '', description: '',users: [],

      },

      tableData: '',

    }
  },
  methods:{
    back(){
      this.$router.push("/userGru")
    },
    subup(){
      this.$refs.multipleTable.selection
    },
    handleSelectionChange(rows){
      // rows.forEach(row => {
      // });

      this.resetForm.users=rows

    },
    load(){
      this.$http.post("user/userNullGru").then(res => {
        if (res.statusCode == '200') {
          ElMessage({
            message: '用户信息获取成功',
            type: 'success',
          })
          this.tableData=res.data.users
        } else {
          ElMessage.error('获取失败！')
        }
      }).catch(() => {
        ElMessage.error('获取失败！')
      })
    },
    registerUserGru(){
      console.log(this.resetForm)
      this.$http.post("group/addUserGru", this.resetForm).then(res => {
        if (res.statusCode == '200') {
          ElMessage({
            message: '新增成功！',
            type: 'success',
          })
          this.$router.push("/userGru")
        } else {
          ElMessage.error('新增失败！')
        }
      }).catch(() => {
        ElMessage.error('新增失败！')
      })
    }
  },
  created() {
    this.load()
  }
}

</script>

<style scoped>
.loginbutton{
  width: 200px;
  position: center;

}
</style>
